<template>
  <div class="main">
    <basic-layout :title="title" :showFilterBtn="false" :showAddBtn="true" @handleAdd="saomAllData"
                  @handleFilter="$refs.queryPopupRef.show = true">
      <div class="mainUpStyleDiv">
        <div class="textStyleDown">
          <span>&nbsp;办公物资:</span><span>{{ this.dataInfos.bgwzsl }}</span>
        </div>
        <div class="textStyleDown">
          <span>&nbsp;服务设备:</span><span>{{ this.dataInfos.fwsbsl }}</span>
        </div>
        <div class="textStyleDown">
          <span>&nbsp;楼宇设备:</span><span>{{ this.dataInfos.lysbsl }}</span>
        </div>
        <div class="textStyleDown">
          <span>&nbsp;未知类别:</span><span>{{ this.dataInfos.wzlbsl }}</span>
        </div>
      </div>
      <!--    列表数据-->
      <div>
        <van-row class="listCard">
          <van-pull-refresh
            v-if="dataList.length"
            class="cardVanPullRefresh1"
            v-model="refreshing"
            @refresh="onRefresh">
            <div v-for="item in dataList" class="dataStyle" @click="clearSingle(item)">
              <!--上面数据-->
              <div class="hengXian">
                <div class="dataBStyle">
                  <div class="listLeft">
                    <span class="ziti">{{ item.shebmc }}</span>
                  </div>
                  <div class="dh">
                    <span style="color: #aaa">{{ item.swid }}</span>
                    <div class="aImgStyle1">
                      <span v-if="item.shebType == '04'">办公物资</span>
                      <span v-if="item.shebType == '05'">服务设备</span>
                      <span v-if="item.shebType == '03'">楼宇设备</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="listMain">
                <div class="sh">
                  <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;">设备型号:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>{{
                    item.xingh
                  }}
                </div>
                <div class="sh">
                  <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;">房产名称:&nbsp;&nbsp;&nbsp;</span>{{
                    item.fangcname
                  }}

                </div>
                <div class="sh">
                  <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;">楼层房间:&nbsp;&nbsp;&nbsp;</span>{{
                    item.loucname
                  }}楼{{ item.fangjname }}
                </div>
              </div>
            </div>
          </van-pull-refresh>
          <div class="btnBox">
            <van-button type="primary" color="#4eb3e9" size="large" @click="showSearch">选择搬家地点</van-button>
          </div>
        </van-row>
      </div>

      <!--    打开右侧搜索栏-->
      <van-popup
        v-model:show="show"
        position="right"
        class="rightBar"
        :style="{ height: '100%', width: '75%' }">
        <div class="mainPopupStyle">
          <div class="typeStyle">
            <div class="typeStyleA"></div>
            <div class="typeStyleB">
              <span>请选择搬家位置</span>
            </div>
            <van-cell-group>
              <van-cell title="单位" is-link arrow-direction="down"
                        :value="this.data.chooseData.chooseDwData != null ? this.data.chooseData.chooseDwData.name : '请选择'"
                        @click="showDialogHandle(1)"/>
            </van-cell-group>

            <van-cell-group>
              <van-cell title="楼宇" is-link arrow-direction="down"
                        :value="this.data.chooseData.chooseLyData != null ? this.data.chooseData.chooseLyData.name : '请选择'"
                        @click="showDialogHandle(2)"/>
            </van-cell-group>

            <van-cell title="楼层" is-link arrow-direction="down"
                      :value="this.data.chooseData.chooseLcData != null ? this.data.chooseData.chooseLcData.name : '请选择'"
                      @click="showDialogHandle(3)"/>

            <van-cell title="房间" is-link arrow-direction="down"
                      :value="this.data.chooseData.chooseFjData != null ? this.data.chooseData.chooseFjData.name : '请选择'"
                      @click="showDialogHandle(4)"/>
          </div>
        </div>
        <div class="bottom">
          <van-button type="info" class="ksbj" @click="searchHandle">
            开始搬家
          </van-button>
        </div>
      </van-popup>

      <van-dialog
        class="dialogMainStyle"
        v-model:show="showDialog"
        :title="dialogTitle"
        :show-confirm-button="false"
        :close-on-click-overlay="true">
        <div class="dialogSearchStyle">
          <form action="/">
            <van-search
              v-model="searchVal"
              placeholder="请输入搜索关键词"
              @input="onUpdate"
            />
          </form>
        </div>
        <div class="dialogDataStyle">
          <div @click="clearHandle()">
            <span>请选择</span>
          </div>
          <div v-for="item in dialogDataBack" @click="chooseHandle(item)">
            <span v-if="item.value" v-html=item.value>{{ item.name }}</span>
            <span v-else>{{ item.name }}</span>
          </div>
        </div>
      </van-dialog>

    </basic-layout>
  </div>
</template>
<script>
import {
  getDetailBySwid,
  getLouyByUser,
  queryShebListByParams,
  updateWzxx,
  getAllCorpMsg,
  getLoucByLouy,
  getFangjByLouc,
  getReportHistory
} from '@/api/srvAssurance/assetLabel/assetLabel'
import { queryDic } from '@/api/common'

export default {
  name: 'index',
  components: {},

  data () {
    return {
      title: '  物资搬家',
      dataInfo: {},
      loading: false,
      finished: false,
      refreshing: false,
      show: false,
      showDialog: false,
      flag: null,
      formData: {
        dwVal: null,
        lyVal: null,
        lcVal: null,
        fjVal: null,
      },
      searchVal: null,
      dialogTitle: '',
      queryParam: {
        dwId: '',
        louyid: '',
        loucid: '',
        fangjid: '',
        pageIndex: 1,
        pageSize: 10,
      },
      data: {
        defaultData: {
          dwDataList: [], //单位数据
          lyDataList: [], //楼宇数据
          lcDataList: [], //楼层数据
          fjDataList: [], //房间数据
        },
        filterData: {
          dwDataList: [], //单位数据
          lyDataList: [], //楼宇数据
          lcDataList: [], //楼层数据
          fjDataList: [], //房间数据
        },
        chooseData: {
          chooseDwData: null,
          chooseLyData: null,
          chooseLcData: null,
          chooseFjData: null,
        },
      },
      dataList: [
      ],
      dialogData: [],
      dialogDataBack: [],
      dataInfos: {
        bgwzsl: 0,
        fwsbsl: 0,
        lysbsl: 0,
        wzlbsl: 0,
      },
    }
  },

  created () {
    this.initData()
    this.initDwData()
     this.initLyData()

    // let userInfo = this.$store.state.userInfo;
    let userName = sessionStorage.getItem('corpName')
    let corpId = sessionStorage.getItem('corpId')
    this.data.chooseData.chooseDwData = {
      orgId: corpId,
    }
  },

  methods: {
    clearSingle(item) {
      this.$dialog.confirm({
        title: '移除物资',
        message:
          '您确定需要移除[' + item.shebmc + "]吗？",
      }).then(() => {
        const list = this.dataList.filter(temp => {
          if (item.swid != temp.swid) {

            this.dataInfos.lysbsl = 0
            this.dataInfos.bgwzsl = 0
            this.dataInfos.fwsbsl = 0
            return temp
          }
        });
        if (list.shebType == '03') {
          this.dataInfos.lysbsl = this.dataInfos.lysbsl + 1
        } else if (list.shebType == '04') {
          this.dataInfos.bgwzsl = this.dataInfos.bgwzsl + 1
        } else if (list.shebType == '05') {
          this.dataInfos.fwsbsl = this.dataInfos.fwsbsl + 1
        }
        this.dataList = list;
      }).catch(() => {
      });
    },
    clearAllData() {
      if (this.dataList.length == 0) {
        return;
      }
      let str = this.dataList.map((item, index) => {
        return item.shebmc;
      }).join(",");
      this.$dialog.confirm({
        title: '移除物资',
        message:
          '您确定需要移除全部[' + str + "]吗？",
      })
        .then(() => {
          this.dataList = [];
        })
        .catch(() => {
        });
    },

    async initLyData () {
      let queryParam = {}
      queryParam.corpid = sessionStorage.getItem('corpId')
      queryParam.fangjLx = ''
      let louYuDatas = await getLouyByUser(queryParam)
      if (louYuDatas.status === 0) {
        var dataList = louYuDatas.data
        dataList.forEach(item => {
          item.name = item.fangcname
          this.data.defaultData.lyDataList.push(item)
        })
      }
    },
    async initDwData () {
      let danWeiDatas = await getAllCorpMsg()
      if (danWeiDatas.status === 0) {
        var dataList = danWeiDatas.data.erjdwList
        dataList.forEach(item => {
          item.name = item.ORG_NAME
          item.orgId = item.ORG_ID
          this.data.defaultData.dwDataList.push(item)
        })
      }
    },

    async showDialogHandle (val) {
      this.dialogDataBack = []
      if (val === 1) {
        this.dialogTitle = '请选择单位信息'
        this.dialogDataBack = [...this.data.defaultData.dwDataList]
        this.data.defaultData.lyDataList = []
      } else if (val === 2) {
        if (this.data.chooseData.chooseDwData == null) {
          this.$toast('请先选择单位信息')
          return
        }
        this.dialogTitle = '请选择楼宇信息'
        let queryParam = {}
        queryParam.corpid = this.data.chooseData.chooseDwData.orgId
        queryParam.fangjLx = ''
        let louYuDatas = await getLouyByUser(queryParam)
        this.data.defaultData.lyDataList = []
        if (louYuDatas.status == 0) {
          louYuDatas.data.forEach(item => {
            var data = {}
            data.fangcid = item.fangcid
            data.name = item.fangcname
            this.data.defaultData.lyDataList.push(data)
          })
        }
        this.dialogDataBack = [...this.data.defaultData.lyDataList]
      } else if (val === 3) {
        // if (this.data.chooseData.chooseDwData == null) {
        //   this.$toast('请先选择单位信息');
        //   return;
        // }else
        if (this.data.chooseData.chooseLyData == null) {
          this.$toast('请先选择楼宇信息')
          return
        }
        this.dialogTitle = '请选择楼层信息'
        let lcData = await getLoucByLouy({ louyid: this.data.chooseData.chooseLyData.fangcid })
        this.data.defaultData.lcDataList = []
        if (lcData.status == 0) {
          lcData.data.forEach(item => {
            var data = {}
            data.loucid = item.loucid
            data.name = item.loucname
            this.data.defaultData.lcDataList.push(data)
          })
        }
        this.dialogDataBack = [...this.data.defaultData.lcDataList]
      } else if (val === 4) {

        if (this.data.chooseData.chooseLyData == null) {
          this.$toast('请先选择楼宇信息')
          return
        } else if (this.data.chooseData.chooseLcData == null) {
          this.$toast('请先选择楼层信息')
          return
        } else {
          this.dialogTitle = '请选择房间信息'
          let fjData = await getFangjByLouc({ loucid: this.data.chooseData.chooseLcData.loucid })
          this.data.defaultData.fjDataList = []
          if (fjData.status == 0) {
            fjData.data.forEach(item => {
              var data = {}
              data.fangjid = item.fangjid
              data.name = item.fangjname
              this.data.defaultData.fjDataList.push(data)
            })
          }
          this.dialogDataBack = [...this.data.defaultData.fjDataList]
        }
      }
      this.showDialog = true
      this.flag = val
    },

    clearHandle () {
      this.showDialog = false
      if (this.flag === 1) {
        this.data.chooseData.chooseDwData = null
      } else if (this.flag === 2) {
        this.data.chooseData.chooseLyData = null
        this.data.chooseData.chooseLcData = null
        this.data.chooseData.chooseFjData = null
      } else if (this.flag === 3) {
        this.data.chooseData.chooseLcData = null
        this.data.chooseData.chooseFjData = null
      } else if (this.flag === 4) {
        this.data.chooseData.chooseFjData = null
      }
    },

    chooseHandle (item) {
      this.showDialog = false
      if (this.flag === 1) {
        this.data.chooseData.chooseDwData = item
        this.data.chooseData.chooseLyData = null
        this.data.chooseData.chooseLcData = null
        this.data.chooseData.chooseFjData = null
      } else if (this.flag === 2) {
        this.data.chooseData.chooseLyData = item
        this.queryParam.louyid = item.fangcid
      } else if (this.flag === 3) {
        this.data.chooseData.chooseLcData = item
        this.queryParam.loucid = item.loucid
      } else if (this.flag === 4) {
        this.data.chooseData.chooseFjData = item
        this.queryParam.fangjid = item.fangjid
      }
    },

    onUpdate (value) {
      value = value.trim()
      this.dialogDataBack = []
      let dialogData = []
      if (this.flag === 1) {
        dialogData = this.data.defaultData.dwDataList
      } else if (this.flag === 2) {
        dialogData = this.data.defaultData.lyDataList
      } else if (this.flag === 3) {
        dialogData = this.data.defaultData.lcDataList
      } else if (this.flag === 4) {
        dialogData = this.data.defaultData.fjDataList
      }
      if (value == null || value.trim() == '') {
        this.dialogDataBack = [...dialogData]
        return
      }
      if (value) {
        dialogData.forEach(i => {
          let val = { ...i }
          //判断遍历是否包含输入字符
          if (val.name.indexOf(value) != -1) {
            var newHtml = `<span style="color: red">${value}</span>`
            //实现高亮效果
            this.dialogDataBack.push(val)
            //替换高亮字段
            this.dialogDataBack.forEach(item => {
              item.value = item.name
              item.value = item.value.replace(value, newHtml)
            })
          }
        })
      }
    },

    onRefresh () {
      this.initData()
    },

    async initData () {
      this.queryParam.pageIndex = 1
      this.finished = false
      this.refreshing = true
      await this.getDataList()
      this.refreshing = false
    },

    // 加载下一页
    nextPage () {
      // 判断第一次查出来的数据是否还有下一页数据，如果没有则不调接口
      if (this.dataList.length < (this.queryParam.pageIndex * this.queryParam.pageSize)) {
        this.finished = true
        return
      }
      setTimeout(() => {
        this.queryParam.pageIndex += 1
        this.getDataList()
      }, 1000)
    },
    async getDataList () {

    },
    showSearch () {
      if (this.dataList.length == 0) {
        this.$toast('请选录入搬家的物资')
        return
      }
      this.show = true
    },
    async saomAllData () {
      this.loading = true
      let _this = this
      wx.scanQRCode({
        desc: 'scanQRCode desc',
        needResult: 1, // 默认为0，扫描结果由i国网处理，1则直接返回扫描结果，
        scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
        success: async function (res) {
          if (res.resultStr) {
            let queryParam = {}
            queryParam.swid = res.resultStr
            let resData = await getDetailBySwid(queryParam)

            if (_this.dataList.length === 0) {
              this.isRes(resData);
            } else {
              let boo = _this.dataList.some(val =>{
                if (val.swid == resData.data[0].swid) {
                  return true
                }
              })
              if (!boo) {
                this.isRes(resData);
              }
            }
          }
        },
        isRes(resData){
          if (resData.status == 0) {
            if (resData.data[0].shebType == '03') {
              _this.dataInfos.lysbsl = _this.dataInfos.lysbsl + 1
            } else if (resData.data[0].shebType == '04') {
              _this.dataInfos.bgwzsl = _this.dataInfos.bgwzsl + 1
            } else if (resData.data[0].shebType == '05') {
              _this.dataInfos.fwsbsl = _this.dataInfos.fwsbsl + 1
            }
            _this.dataList = _this.dataList.concat(resData.data)
          }
        },
        error: function (res) {
          if (res.errMsg.indexOf('function_not_exist') > 0) {
            alert('版本过低请升级')
          }
        }
      })
      this.loading = false
    },
    async searchHandle () {
      if (this.data.chooseData.chooseFjData == '' || this.data.chooseData.chooseFjData == null) {
        this.$toast('请选择房间')
        return
      }
      this.loading = true
      let queryParam = {}
      let swids = ''
      for (const key in this.dataList) {
        // _this.dataInfo =this.dataList[key];
        if (swids == '') {
          swids = swids + this.dataList[key].swid
        } else {
          swids = swids + ',' + this.dataList[key].swid
        }
      }
      queryParam.swid = swids
      queryParam.lyxxid = this.data.chooseData.chooseLyData.fangcid
      queryParam.lcxxid = this.data.chooseData.chooseLcData.loucid
      queryParam.fjxxid = this.data.chooseData.chooseFjData.fangjid
      let res = await updateWzxx(queryParam)
      if (res.status == 0) {
        this.$toast(res.message)
        this.dataList = []
        this.dataInfos.lysbsl = 0
        this.dataInfos.bgwzsl = 0
        this.dataInfos.fwsbsl = 0
      }
      this.loading = false
    },

  }
}
</script>

<style scoped lang="less">
.main {
  height: 100%;
  background-color: #8080803b;

  .mainUpStyleDiv {
    background-color: #FFFFFF;
    padding: 21.96px;

    .textStyleDown {
      width: 25%;
      line-height: 1px;
      float: left;
    }
  }
  .listCard {
    background-color: #8080803B;
    height: calc(100% - 125px);
    width: 100%;
    z-index: 999;
    overflow: auto;
    justify-content: flex-start;
    align-items: center;
    .btnBox {
      width: 100%;
      position: fixed;
      bottom: 0px;
      height: 40px;
      margin: 20px auto;
      // padding: 0 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .btnBox /deep/ .van-button--large {
    }
    .cardVanPullRefresh1 {

      .dataStyle {
        height: 160px;
        margin: 10px;
        background-color: #FFFFFF;
        line-height: 23px;
        border-radius: 3px;
        font-size: 0.4rem;

        .hengXian {
          box-sizing: border-box;
          border-bottom: 1px solid #eee;
          line-height: 0.64rem;
        }

        .dataBStyle {
          height: 55px;
          position: relative;

          .listLeft {
            margin-left: 10px;
            font-size: 0.4rem;
            font-weight: bold;
            padding-top: 9px;

            .ziti {
              margin-top: 1px;
            }

          }

          .dh {
            margin-left: 10px;
            font-size: 0.3rem;

            .aImgStyle1 {
              position: absolute;
              top: 0.4667rem;
              right: 0.48rem;
              font-size: 15px;
              margin-left: 78%;
            }
          }
        }


        .listMain {
          line-height: 29px;
          position: relative;

          .downOtherProcess {
            width: 80%;
            float: left;
          }

          .downOtherText {
            transform: translateY(-5px);
            width: 100%;
          }
        }
      }

      /deep/ .van-progress__pivot {
        display: none;
      }

      /deep/ .van-progress {
        height: 11px;
        margin-top: 4px;
      }

      .custom-image {
        height: 100%;
      }
    }
  }

  .van-button--large {
    height: 40px;
    line-height: 40px;
    width: 95%;
    margin: 10px auto;
  }
  /deep/ .van-cell__value {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .van-field__body {
      width: 100%;
    }
  }
}

</style>
